<template>
  <div class="overview-style">
    <el-button
      style="position: relative;left: 1020px;top: 20px"
      @click="deleteDialogVisible=true"
    >清除所有记录</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="系统消息" name="first">
        <span v-for="item in sysMessageData" :key="item.id">
          <div class="item-style-group">
            <span class="item-title-style">{{item.title}}</span>
            <span class="item-time-style">{{item.createTime}}</span>
            <div class="item-content-style">{{item.content}}</div>
          </div>
        </span>
      </el-tab-pane>
      <el-tab-pane label="通知公告" name="second">
        <span v-for="item in noticeData" :key="item.id">
          <div class="item-style-group">
            <span class="item-title-style">{{item.title}}</span>
            <span class="item-time-style">{{item.createTime}}</span>
            <div class="item-content-style">{{item.content}}</div>
          </div>
        </span>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="清空确认" :visible.sync="deleteDialogVisible" top="34vh" width="26%">
      <div class="delete-dialog-style">消息清空后无法恢复，确定清空所有消息吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteDialogVisible=false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "SettingMessageNotification",
  components: {},
  props: {},
  data() {
    return {
      activeName: "first",
      sysMessageData: [],
      sysMessageNum: 0,
      noticeData: [],
      noticeNum: 0,
      deleteDialogVisible: false,
      isLoading: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // handleClean(){
    //   this.deleteDialogVisible=true
    // },
    // handleDelete(){
    //   this.$refs.sysMessageData.resetFields();
    //   this.deleteDialogVisible=false;
    // },
    getSysMessageData() {
      this.isLoading = true;
      api.getAllSysMessageAPI().then(res => {
        this.isLoading = false;
        let { error, data } = res.data;
        if (error) {
          this.$message.error("请求接口异常");
        } else {
          this.sysMessageNum = data.total;
          this.sysMessageData = data.page;
        }
      });
    },
    getNoticeData() {
      this.isLoading = true;
      api.getAllAnnouncementAPI().then(res => {
        this.isLoading = false;
        let { error, data } = res.data;
        if (error) {
          this.$message.error("请求接口异常");
        } else {
          this.noticeNum = data.total;
          this.noticeData = data.page;
        }
      });
    }
  },
  created() {
    this.getSysMessageData();
    this.getNoticeData();
  },
  mounted() {}
};
</script>

<style scoped>
.overview-style {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.delete-dialog-style {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  padding: 20px;
  padding-bottom: 70px;
}
.item-style-group {
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;
}
.item-title-style {
  font-size: 17px;
  padding-right: 10px;
}
.item-time-style {
  font-size: 14px;
  color: #d6d6d6;
}
.item-content-style {
  font-size: 14px;
  color: gray;
  padding: 10px 0;
}
</style>
<style>
.el-tabs__item {
  margin-bottom: 20px;
}
</style>
